<template>
  <div>
    <div class="page-role">
      <div class="pxui-area">
        <h1>
          <strong class="pxui-color-red">{{msgs.name}}</strong><span> {{msgs.price}}元／10000字</span>
        </h1>
        <p v-html="msgs.desc"></p>
        <div class="pros_ny">
          <form class="layui-form">
            <div class="layui-form-item">
              <label class="layui-form-label">题目</label>
              <div class="layui-input-block">
                <input id="title"
                       type="text"
                       v-model="formMess.title"
                       lay-verify="required"
                       placeholder="请输入论文题目"
                       autocomplete="off"
                       class="layui-input"
                       style="width: 90%;height: 40px;">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">作者</label>
              <div class="layui-input-block">
                <input id="author"
                       type="text"
                       v-model="formMess.writer"
                       lay-verify="required"
                       placeholder="请输入论文作者"
                       autocomplete="off"
                       class="layui-input"
                       style="width: 90%;height: 40px;">
              </div>
            </div>
            <input type="hidden"
                   v-model="formMess.uid"
                   value="0" />
            <input type="hidden"
                   v-model="formMess.id" />
            <input type="hidden"
                   v-model="formMess.cfrom"
                   value="main" />
            <input type="hidden"
                   checked
                   v-model="formMess.mode"
                   id="text"
                   ref="onecheck" />
            <div class="layui-form-item"
                 style="display:none">
              <input type="hidden"
                     v-model="formMess.textfield"
                     id="textfield" />
              <input type="hidden"
                     name="cfrom"
                     v-model="formMess.user" />
              <input type="file"
                     style="display:none"
                     name="file"
                     id="file">
              <input type="hidden" />
              <label class="layui-form-label">手机号码</label>
              <div class="layui-input-block">
                <input id="mobile"
                       type="text"
                       v-model="formMess.phone"
                       lay-verify="required"
                       placeholder="请输入手机号码"
                       autocomplete="off"
                       class="layui-input"
                       style="width: 90%;height: 40px;">
              </div>
            </div>
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">内容</label>
              <div class="layui-input-block">
                <textarea id="content"
                          v-model="formMess.content"
                          placeholder="请输入论文内容"
                          class="layui-textarea"
                          style="width: 90%;height: 300px;"></textarea>
              </div>
            </div>
            <div>
              <a class="bjgm"
                 @click="form_submit()">
                <span>提交</span>
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msgs: [],
      formMess: {
        user: '',
        title: '',
        uid: '',
        cfrom: 'main',
        writer: '',
        phone: '',
        mode: '',
        content: '',
        textfield: '',
        file: '',
        cfrom: 'user',
        from_uid: 0,
        id: ''
      },
      orderid: ''
    }
  },
  created () {
    this.msgs = this.$route.params.list
    console.log(this.msgs.id)
    this.formMess.id = this.msgs.id
  },
  methods: {
    form_submit () {
      const params = new URLSearchParams();
      for (var key in this.formMess) {
        console.log(key + this.formMess[key])
        params.append(key, this.formMess[key])
      }
      this.$http.getTosubmit(
        params
      ).then(resp => {
        if (resp.order_id == "") {
        } else {
          this.orderid = resp.order_id
          this.$router.push({ name: 'pay', params: { orderid: this.orderid, msg: this.msgs } })
        }
      }
      )
    }
  }
}
</script>

<style scoped>
.pxui-color-red {
  color: #fb4e3a;
  font-size: 0.5rem;
}
.pxui-area h1 span {
  font-size: 0.3rem;
  color: #575757;
}
.pxui-area {
  padding: 0.3rem;
  background: #fff;
}
.pxui-area p {
  text-indent: 2em;
  font-size: 0.3rem;
  line-height: 0.5rem;
  font-size: 0.33rem;
  color: #575757;
}
.pxui-area h1 {
  line-height: 0.8rem;
}
.pros_ny {
  margin-top: 0.6rem;
}
.layui-form {
  line-height: 28px;
}
.layui-form-item {
  display: flex;
  margin-bottom: 0.6rem;
}
.layui-form-label {
  align-self: center;
  white-space: nowrap;
}
.layui-input-block {
  width: 85%;
  margin-left: 0.4rem;
}
.bjgm {
  background: #228ef7;
  margin: 0 auto;
  display: block;
  width: 2rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: #fff;
  margin-bottom: 2rem;
}
</style>